<template>
    <div id="app">
        <el-container>
            <el-header>
                <Top/>
            </el-header>
            <el-mian class="center">
                <el-tooltip class="item" effect="light" content="返回" placement="top-start">
                <el-button type="primary" icon="el-icon-arrow-left" circle style="width:50px;height: 50px; position: fixed;margin-top: 5%;margin-left: 4%" @click="goback()"></el-button>
                </el-tooltip>
                    <el-tooltip class="item" effect="light" content="新建文件夹" placement="top-start">
                    <el-button type="primary" icon="el-icon-plus" circle style="width:50px;height: 50px; position: fixed;margin-top: 15%;margin-left: 4%" @click="open()"></el-button>
                    </el-tooltip>
                        <el-tooltip class="item" effect="light" content="删除文件夹" placement="top-start">
                        <el-button type="danger" icon="el-icon-delete" circle style="width:50px;height: 50px; position: fixed;margin-top: 25%;margin-left: 4%" @click="deleteornot()"></el-button>

                        </el-tooltip>
                <el-card style="cursor: pointer;margin: 20px 200px;border-radius: 5px;border: 4px solid rgba(0,0,0,0.1);padding-top: 5px;background-color: rgba(255,255,255,40%)">
                    <el-card shadow="always" style="background-color: rgba(255,255,255,70%)">


                        <!--                      <span style="font-size: 20px;font-weight: bolder">-->
                        <!--                        <span style="margin: 10px 20px">标题</span>-->
                        <!--                        <span style="margin: 10px 400px">作者</span>-->
                        <!--                        <span style="margin: 10px 200px">创建时间</span>-->
                        <!--                      </span>-->

                        <el-row gutter="10" style="font-size: 20px;font-weight: bolder">
                            <el-col span="6">标题</el-col>
                            <el-col span="6">作者</el-col>
                            <el-col span="6">创建时间</el-col>
                        </el-row>


                    </el-card>

                    <el-card style="background-color: rgba(255,255,255,70%);margin-top: 5px;" v-for="c in collectContent" class="box-card" >

                        <el-row gutter="10" style="font-size: 15px;font-weight: bold">

                            <a @click="toDetail(c.blogId,c.userId)">
                                <el-col span="6" ><p>{{c.blogTitle}}</p></el-col>
                            <el-col span="6"><p>{{c.nickname}}</p></el-col>
                            <el-col span="6"><p>{{c.createTime}}</p></el-col>
                            </a>
                            <el-col span="6">
                            <el-button type="danger" plain @click="deleteContent(c.id)">删除</el-button>
                            </el-col>
                        </el-row>


                    </el-card>
                </el-card>


            </el-mian>
        </el-container>

    </div>
</template>
<script>
import Top from '@/components/Top.vue'
import Bottom from "@/components/Bottom.vue"
import SpecialTop from "@/components/SpecialTop"
import axios from "axios";
import '@/api/request'
export default {
    components: {
        Top,
        Bottom,
        SpecialTop
    },
    el: '#app',
    data: function () {
        return {
            collectContent:[],
            value:'',
            id:'',
            name:'',
            count:"",
            createTime:""

        }
    },
    computed: {
        noMore () {
            return this.count >= 2000
        },
        disabled () {
            return this.loading || this.noMore
        }
    },
    methods:{
        goback(){
            window.location.href="collect.html"

        },
        queryByTime(){
            this.user="";
            this.blog="";
            this.type=4;
            console.log(this.blog)
            axios.get("http://localhost:8088/blog/queryByTime/"+this.key).then(response=>{
                if (response.data.code==1){
                    this.blog=response.data.data
                    console.log(this.content)
                    localStorage.blog=response.data.data;
                    console.log(this.blog);
                }
                else if (response.data.code!=1){
                    this.open1()
                }
            })
        },

        open(){
            this.$prompt('请输入收藏夹名称', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {

                this.createDir(value)
                location.href="collect.html"


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });
        },

        deleteornot(){

            this.$confirm('此操作将永久删除收藏夹, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

                this.deleteDir()


                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });


        },
        deleteContent(id){
            axios.get("http://localhost:8088/collectContent/deleteById/"+id).then(response=>{
                if (response.data.data){

                    this.$message.success("该内容删除成功！");
                    this.findContent();
                }

            })

        },

        deleteDir(){
            axios.post("http://localhost:8088/collectDirectory/deleteById/"+this.id).then(response=>{
                if (response.data.data){

                    window.location.href="collect.html"
                }

            })


        },






        createDir(value){
            console.log("create方法获取的文件夹名:"+ value)
            axios.post("http://localhost:8088/collectDirectory/newDir",value,{headers:{
                    'Content-Type':'application/json'
                }}).then(response=>{


                if (response.data.code==1){
                    this.$message({
                        type: 'success',
                        message: '恭喜你！创建收藏夹:'+value+"成功！",
                        offset:100
                    });

                }else{
                    this.$message({
                        type:'warning',
                        message:response.data.msg,
                        offset:100
                    })

                }

            })



        },



        findContent(){
            axios.get("http://localhost:8088/collectContent/queryCollectContent/"+this.id).then(response=>{
                console.log("方法中的id"+this.id)
                if (response.data.code==1) {
                    this.collectContent = response.data.data
                    console.log(response.data.data)
                    console.log("获取到的收藏夹内容" + this.collectContent)
                }

            })




        },
        toDetail(id,userId) {
            localStorage.setItem('id', id);
            localStorage.setItem('userId', userId);
            window.location.href = "detail.html"
        },



    },




    created(){
        this.id=localStorage.getItem("id")
        this.name=localStorage.getItem("name")
        this.count= localStorage.getItem("count")
        this.createTime=localStorage.getItem("createTime")

        console.log("传到onecollect的id:"+this.id)
        console.log("传到onecollect的name:"+this.name)
        console.log("传到onecollect的count:"+this.count)
        console.log("传到onecollect的createTime:"+this.createTime)
        this.findContent()


    }
}
</script>
<style>
.el-message {
    top: 100px !important;
}
.box-card:hover{

    text-decoration: underline;
    border: 10px solid #E2E2E2; ;
}
.el-card{
    background-color: white;margin: 0 auto
}
</style>
